<template>
    <div class="discover">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             style="position:absolute;width:0;height:0">
            <defs>
                <symbol viewBox="0 0 34 33" id="nice">
                    <g fill="#F12C2C" fill-rule="evenodd">
                        <path
                            d="M19.1 10s.404-1.959.685-3.294l.068-.323a472.237 472.237 0 0 1 .83-3.832l.077-.352C21.016 1.036 20.194 0 19.01 0H14.49c-.625 0-1.284.377-1.606.915l-5.742 9.57L8 10H2.003A1.995 1.995 0 0 0 0 11.999V31C0 32.106.9 33 2.003 33h23c1.548 0 3.082-1.157 3.507-2.645l4.63-16.204C33.776 11.923 32.32 10 30 10H19.1zM18 12h12c.993 0 1.488.653 1.217 1.601l-4.63 16.205c-.18.629-.929 1.194-1.584 1.194h-23L2 11.999C2 11.996 8 12 8 12h.566l.291-.486 5.743-9.57c-.037.061-.028.056-.109.056h4.518c-.1 0-.22-.152-.202-.233l-.078.354a513.863 513.863 0 0 0-.832 3.848l-.069.325c-.284 1.349-.51 2.46-.657 3.255-.087.465-.146.818-.177 1.058a2.394 2.394 0 0 0-.026.41c.004.078.004.078.027.21.039.185.039.185.349.563.717.292.656.21.656.21z"></path>
                        <path d="M7 10h2v22H7z"></path>
                    </g>
                </symbol>
                <symbol viewBox="-4 3 30 30" id="alarm">
                    <g id="alarm_页面">
                        <g id="alarm_发现页_新增天天特价_确认" transform="translate(-31 -1587)">
                            <g id="alarm_商品" transform="translate(-2 1556)">
                                <g id="alarm_Page-1">
                                    <path
                                        d="M10 29.9c-7.2 0-13-5.8-13-13 0-2 .4-3.9 1.3-5.7C.5 6.7 5 3.9 10 3.9c7.2 0 13 5.8 13 13s-5.8 13-13 13zM.1 12.1C-.7 13.6-1 15.2-1 16.9c0 6.1 4.9 11 11 11s11-4.9 11-11-4.9-11-11-11c-4.3 0-8.1 2.3-9.9 6.2z"
                                        class="st0" transform="translate(34 32)"></path>
                                    <path
                                        d="M-1 12.1c-1.8-.9-3-2.7-3-4.8C-4 4.4-1.6 2 1.3 2c2 0 3.8 1.1 4.7 2.8l-1.8 1C3.7 4.7 2.5 4 1.3 4-.5 4-2 5.5-2 7.3c0 1.3.7 2.4 1.8 3l-.8 1.8zM21 11.8l-1-1.7c1-.6 1.6-1.7 1.6-2.8 0-1.8-1.5-3.3-3.3-3.3-1.3 0-2.5.8-3.1 2l-1.8-.8c.8-2 2.8-3.3 4.9-3.3 2.9 0 5.3 2.4 5.3 5.3-.1 2-1 3.7-2.6 4.6zM14.3 20.2h-4.2c-.6 0-1-.4-1-1v-8.1c0-.6.4-1 1-1s1 .4 1 1v7.1h3.2c.6 0 1 .4 1 1s-.4 1-1 1zM-1.2 32c-.2 0-.5-.1-.7-.3-.4-.4-.4-1-.1-1.4l4-4.5c.4-.4 1-.4 1.4-.1.4.4.4 1 .1 1.4l-4 4.5c-.2.3-.4.4-.7.4zM21.5 32c-.3 0-.5-.1-.7-.3l-4-4.5c-.4-.4-.3-1 .1-1.4.4-.4 1-.3 1.4.1l4 4.5c.4.4.3 1-.1 1.4-.2.1-.4.2-.7.2z"
                                        class="st0" transform="translate(34 32)"></path>
                                </g>
                            </g>
                        </g>
                    </g>
                </symbol>
                <symbol viewBox="0 0 34 34" id="recommend">
                    <g id="recommend_XMLID_1_">
                        <path id="recommend_XMLID_9_"
                              d="M32.5 10.1c-.2-.5-.8-.7-1.3-.5-.5.2-.7.8-.5 1.3.9 1.9 1.3 4 1.3 6.1 0 8.3-6.7 15-15 15S2 25.3 2 17c0-2.7.7-5.2 2-7.4 1.1 0 2-.9 2-2 0-.2 0-.4-.1-.6C8.6 4 12.6 2 17 2c1.9 0 3.7.3 5.4 1 .5.2 1.1-.1 1.3-.6.2-.5-.1-1.1-.6-1.3-2-.7-4-1.1-6.1-1.1-5 0-9.5 2.2-12.6 5.6H4c-1.1 0-2 .9-2 2 0 .4.1.7.3 1C.8 11.1 0 13.9 0 17c0 9.4 7.6 17 17 17s17-7.6 17-17c0-2.4-.5-4.7-1.5-6.9z"
                              class="st0"></path>
                        <circle id="recommend_XMLID_10_" cx="27.5" cy="5.8" r="1.5" class="st0"></circle>
                        <path id="recommend_XMLID_13_"
                              d="M12 24.3c.4 0 .8-.1 1.2-.3 1.1.6 2.4 1 3.8 1 4.4 0 8-3.6 8-8s-3.6-8-8-8-8 3.6-8 8c0 .9.2 1.9.5 2.7-.3.5-.5 1-.5 1.6 0 1.7 1.3 3 3 3zM17 11c3.3 0 6 2.7 6 6s-2.7 6-6 6c-.8 0-1.6-.2-2.3-.5.2-.4.3-.8.3-1.2 0-1.7-1.3-3-3-3-.3 0-.6.1-.8.1-.1-.4-.2-.9-.2-1.4 0-3.3 2.7-6 6-6z"
                              class="st0"></path>
                    </g>
                </symbol>
                <symbol viewBox="0 0 16 25" id="tab_found_next_page">
                    <path fill="none" fill-rule="evenodd" stroke="#CCC" stroke-linecap="round" stroke-width="3"
                          d="M2.127 2l10.87 10.582L2.291 23.11"></path>
                </symbol>
            </defs>
        </svg>
        <pageHeader :callback="back" title="发现"></pageHeader>
        <!--parts活动-->
        <section class="parts">
            <div v-for="part in parts" class="entry"
                 :class="{list2:part.length%2===0&&!part[0].sub_pic_hash,list3:part.length%2===1&&!part[0].sub_pic_hash}">
                <a v-for="item in part" @click="judgePath(item.content_url)" href="javascript:void(0);"
                   :class="{'sub-pic-hash':item.sub_pic_hash}">
                    <div v-if="!item.sub_pic_hash" class="content-wrapper">
                        <p class="title" :style="{color:item.title_color}">{{item.title}}</p>
                        <p class="tips">{{item.subtitle}}</p>
                    </div>
                    <img v-if="item.sub_pic_hash" class="sub-pic" v-lazy="analysismageHash(item.sub_pic_hash)">
                    <img v-else class="icon" v-lazy="analysismageHash(item.main_pic_hash)">
                </a>
            </div>
        </section>
        <!--为你推荐-->
        <router-link v-if="!crayfish.activities.ulike.isHide"
                     :to="{path:'/recommend',query:{rank_id:recommendation.rank_id}}" tag="section">
            <!--<section>-->
            <div class="activity-header">
                <span class="line left"></span>
                <svg class="activity-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#nice"></use>
                </svg>
                {{crayfish.activities.ulike.title}}
                <span class="line right"></span>
                <p class="activity-sub-title">{{crayfish.activities.ulike.sub_title}}</p>
            </div>
            <recommendList :recommends="recommendation.items"></recommendList>
            <p class="activity-more">查看更多
                <svg class="svg-next">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tab_found_next_page"></use>
                </svg>
            </p>
            <!--</section>-->
        </router-link>
        <!--限时好礼-->
        <section v-if="!crayfish.activities.gift.isHide" @touchend="$router.push('/exchange');">
            <div class="activity-header">
                <span class="line left"></span>
                <svg class="activity-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#alarm"></use>
                </svg>
                {{crayfish.activities.gift.title}}
                <span class="line right"></span>
                <p class="activity-sub-title">{{crayfish.activities.gift.sub_title}}</p>
            </div>
            <div class="activity-body">
                <a v-for="item in suggest" @touchend.stop.proevent="function(){}" :href="item.url"
                   class="discover-food">
                    <img
                        v-lazy="analysismageHash(item.image_hash)">
                    <div>
                        <p class="food-name zhu_ellipsis">{{item.title}}</p>
                        <div class="food-info zhu_clearfix">
                            <div class="food-price">
                                <span class="price zhu_ellipsis">
                                    <span>{{item.points_required}}金币</span>
                                </span>
                                <del v-if="item.original_price" class="original-price zhu_ellipsis">
                                    ¥{{item.original_price}}
                                </del>
                            </div>
                        </div>
                    </div>
                    <span class="discount" v-if="item.corner_marker">{{item.corner_marker}}</span>
                </a>
            </div>

            <p class="activity-more">查看更多
                <svg class="svg-next">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tab_found_next_page"></use>
                </svg>
            </p>
        </section>
        <!--每日精选-->
        <section v-if="!crayfish.activities.selected.isHide"
                 @touchend="openWebWindow(crayfish.selected_android.link);">
            <div class="activity-header">
                <span class="line left"></span>
                <svg class="activity-icon">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#recommend"></use>
                </svg>
                {{crayfish.activities.selected.title}}
                <span class="line right"></span>
                <p class="activity-sub-title">{{crayfish.activities.selected.sub_title}}</p>
            </div>

            <div class="activity-body">
                <a v-for="item in crayfish.selected_android.foods"
                   class="discover-food">
                    <img
                        v-lazy="analysismageHash(item.image_hash)">
                    <div>
                        <p class="food-name zhu_ellipsis">{{item.title}}</p>
                        <div class="food-info zhu_clearfix">
                            <div class="food-price">
                                <span class="price zhu_ellipsis">
                                    <span>¥{{item.price}}</span>
                                </span>
                                <del v-if="item.original_price" class="original-price zhu_ellipsis">
                                    ¥{{item.original_price}}
                                </del>
                            </div>
                        </div>
                    </div>
                    <span class="discount" v-if="item.corner_marker">{{item.corner_marker}}</span>
                </a>
            </div>
            <p class="activity-more">查看更多
                <svg class="svg-next">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#tab_found_next_page"></use>
                </svg>
            </p>
        </section>
    </div>
</template>
<script type="text/ecmascript-6">
    import pageHeader from '@/components/pageHeader/pageHeader';
    import recommendList from '@/components/recommendList/recommendList';
    import {analysismageHash, openWebWindow} from '../../common/js/util.js';
    import crayfish from './crayfish.js';

    export default {
        data() {
            return {
                parts: {},
                recommendation: {},
                suggest: [],
                crayfish
            };
        },
        props: {
            location: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        mounted() {
            document.title = '发现';
            this.getDiscover();
        },
        watch: {
            location() {
                this.getDiscover();
            }
        },
        methods: {
            analysismageHash,
            openWebWindow,
            back() {
                this.$router.back();
            },
            getDiscover() {
                if (!this.location.longitude || !this.location.latitude) {
                    return false;
                }
                if (this.custom.hasServer) {
                    let latitude = this.location.latitude;
                    let longitude = this.location.longitude;
                    let url = `/api/member/v1/discover?platform=1&block_index=0&latitude=${latitude}&longitude=${longitude}`;
                    this.$ajax.get(url)
                        .then((res) => {
                            this.parts = res.data;
                            let url = `/api/shopping/v1/find/recommendation?offset=0&limit=6&latitude=${latitude}&longitude=${longitude}`;
                            return this.$ajax.get(url);
                        })
                        .then((res) => {
                            this.recommendation = res.data;
                            let url = `/api/member/gifts/suggest`;
                            return this.$ajax.get(url);
                        })
                        .then((res) => {
                            this.suggest = res.data;
                        })
                        .catch((err) => {
                            console.error("discover", err);
                        });
                } else {
                    let url = `./simulate_data/discover/parts.json`;
                    this.$ajax.get(url)
                        .then((res) => {
                            this.parts = res.data;
                            let url = `./simulate_data/discover/recommendation.json`;
                            return this.$ajax.get(url);
                        })
                        .then((res) => {
                            this.recommendation = res.data;
                            let url = `./simulate_data/discover/suggest.json`;
                            return this.$ajax.get(url);
                        })
                        .then((res) => {
                            this.suggest = res.data;
                        })
                        .catch((err) => {
                            console.error("discover", err);
                        });
                }
            },
            judgePath(path) {
                if (/http/ig.test(path)) {
                    window.location.href = path;
                } else {
                    this.$router.push(path);
                }
            }
        },
        components: {
            pageHeader,
            recommendList
        }
    };
</script>
<style rel="stylesheet/css" type="text/css" lang="less" scoped>
    .discover {
        section {
            margin-bottom: .28rem;
            margin-bottom: 2.8vw;
            background: #fff;
            border-top: 1px solid #eee;
            border-bottom: .013333rem solid #eee;
            border-bottom: .133333vw solid #eee;
        }
        .parts {
            border-bottom: none;
            background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
            background: initial;
            .entry {
                border-width: 1px 0;
                box-sizing: border-box;
                overflow: hidden;
                display: flex;
                background: #fff;
                flex-wrap: wrap;
                &:not(:last-child) {
                    margin-bottom: .28rem;
                    margin-bottom: 2.8vw;
                }
                &.list2, &.list3 {
                    a {
                        &:first-child {
                            border-right: 1px solid #ededed;
                        }
                        .icon {
                            width: 1.2rem;
                            width: 12vw;
                        }
                    }
                }
                &.list2 {
                    a {
                        width: 50%;
                        float: left;
                        &:nth-child(odd) {
                            border-right: 1px solid #ededed;
                        }
                    }
                }
                &.list3 {
                    a {
                        width: 50%;
                        &:first-child {
                            position: absolute;
                            justify-content: space-between;
                            align-items: flex-start;
                            height: 4.266667rem;
                            height: 42.666667vw;
                            padding: .586667rem .293333rem .16rem .426667rem;
                            padding: 5.866667vw 2.933333vw 1.6vw 4.266667vw;
                            .icon {
                                -webkit-align-self: flex-end;
                                -ms-flex-item-align: end;
                                align-self: flex-end;
                                width: 2rem;
                                width: 20vw;
                            }
                        }
                        &:nth-child(even) {
                            border-right: 1px solid #ededed;
                        }
                        &:nth-child(2), &:nth-child(3) {
                            margin-left: 50%;
                            border-right: none;
                        }
                    }
                }
                a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    height: 2.133333rem;
                    height: 21.333333vw;
                    padding: 0 .4rem;
                    padding: 0 4vw;
                    border-bottom: 1px solid #ededed;
                    &.sub-pic-hash {
                        height: 2.4rem;
                        height: 24vw;
                        padding: 0;
                    }
                    .content-wrapper {
                        max-width: 3rem;
                        max-width: 30vw;
                        .title {
                            line-height: 1.2;
                            font-size: .426667rem;
                            margin-bottom: .16rem;
                            margin-bottom: 1.6vw;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        .tips {
                            line-height: 1.2;
                            font-size: .32rem;
                            color: #999;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    img {
                        max-width: 100%;
                    }
                    .icon {
                        width: 1.6rem;
                        width: 16vw;
                    }
                }
            }
        }

        .activity-header {
            padding-top: .52rem;
            padding-top: 5.2vw;
            text-align: center;
            font-size: .48rem;
            font-weight: 700;
            color: #333;
            .line {
                display: inline-block;
                margin: .213333rem .093333rem .173333rem;
                margin: 2.133333vw .933333vw 1.733333vw;
                border: 1px solid #333;
                width: .4rem;
                width: 4vw;
                height: 0;
                position: relative;
                &.left:after {
                    right: -.066667rem;
                    right: -.666667vw;
                }
                &.right:after {
                    left: -.066667rem;
                    left: -.666667vw;
                }
                &::after {
                    position: absolute;
                    top: -.066667rem;
                    top: -.666667vw;
                    content: "";
                    background: #333;
                    height: .133333rem;
                    height: 1.333333vw;
                    width: .133333rem;
                    width: 1.333333vw;
                    border-radius: 50%;
                }
            }
            .activity-icon {
                position: relative;
                top: .053333rem;
                top: .533333vw;
                width: .44rem;
                width: 4.4vw;
                height: .44rem;
                height: 4.4vw;
            }
            .activity-sub-title {
                font-size: .293333rem;
                color: #999;
                text-align: center;
                padding: .1rem 0 .213333rem;
                padding: 1vw 0 2.133333vw;
            }
        }
        .activity-more {
            font-size: .346667rem;
            color: #999;
            text-align: center;
            padding: 0 0 .48rem;
            padding: 0 0 4.8vw;
            .svg-next {
                height: .24rem;
                height: 2.4vw;
                width: .133333rem;
                width: 1.333333vw;
                margin-left: .146667rem;
                margin-left: 1.466667vw;
            }
        }
        /*.activity-recommend {
            padding-bottom: .4rem;
            padding-bottom: 4vw;
            padding-left: .133333rem;
            padding-left: 1.333333vw;
            .recommend {
                display: inline-block;
                position: relative;
                width: 4.6rem;
                width: 46vw;
                background: #fff;
                border: 1px solid #eee;
                text-align: left;
                margin: .12rem;
                margin: 1.2vw;
                .recommend_img {
                    display: block;
                    width: 4.6rem;
                    width: 46vw;
                    height: 4.6rem;
                    height: 46vw;
                }
                .recommend_food, .food_detail, .recommend_shop {
                    margin: 0 .213333rem 0 .266667rem;
                    margin: 0 2.133333vw 0 2.666667vw;
                }
                .recommend_food {
                    padding-top: .106667rem;
                    padding-top: 1.066667vw;
                    .food_name {
                        overflow: hidden;
                        color: #333;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-weight: 700;
                        font-size: .4rem;
                    }
                    .food_sell {
                        margin-top: .08rem;
                        margin-top: .8vw;
                        color: #666;
                        font-size: .266667rem;
                    }
                }
                .food_detail {
                    display: flex;
                    align-items: center;
                    padding-bottom: .08rem;
                    padding-bottom: .8vw;
                    .food_price {
                        display: flex;
                        align-items: baseline;
                        font-size: .426667rem;
                        .price_now {
                            color: #ff6000;
                            font-size: 1em;
                            i {
                                font-size: .65em;
                                margin-right: .04rem;
                                margin-right: .4vw;
                                font-style: normal;
                            }
                            span {
                                font-weight: 700;
                            }
                        }
                        .price_old {
                            margin-left: .106667rem;
                            margin-left: 1.066667vw;
                            color: #999;
                            font-size: .65em;
                            i {
                                margin-right: .04rem;
                                margin-right: .4vw;
                                font-style: normal;
                            }
                        }
                    }
                    .support {
                        margin-left: .133333rem;
                        margin-left: 1.333333vw;
                        padding: 0 .053333rem;
                        padding: 0 .533333vw;
                        border: 1px solid #f66d6b;
                        border-radius: .053333rem;
                        border-radius: .533333vw;
                        color: #f66d6b;
                        font-size: .266667rem;
                    }
                }
                .support, .recommend_shop {
                    display: flex;
                    align-items: center;
                }
                .recommend_shop {
                    height: .88rem;
                    height: 8.8vw;
                    border-top: 1px dashed #ccc;
                    .shop_name {
                        display: flex;
                        flex: 1 1 auto;
                        align-items: center;
                        overflow: hidden;
                        svg {
                            display: block;
                            -webkit-box-flex: 0;
                            flex: 0 0 0.266667rem;
                            flex: 0 0 2.666667vw;
                            width: .266667rem;
                            width: 2.666667vw;
                            height: .266667rem;
                            height: 2.666667vw;
                            fill: #bbb;
                        }
                        span {
                            flex: 1 1 auto;
                            overflow: hidden;
                            margin-left: .16rem;
                            margin-left: 1.6vw;
                            color: #999;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: .293333rem;
                        }
                    }
                }
            }
        }*/
        .activity-body {
            padding: .32rem 0 .4rem .4rem;
            padding: 3.2vw 0 4vw 4vw;
            /*white-space: nowrap;*/
            .discover-food {
                display: inline-block;
                position: relative;
                box-sizing: border-box;
                width: 2.96rem;
                width: 29.6vw;
                margin-right: .16rem;
                margin-right: 1.6vw;
                img {
                    width: 4.32rem;
                    width: 43.2vw;
                    height: 2.933333rem;
                    height: 29.333333vw;
                    margin-bottom: .253333rem;
                    margin-bottom: 2.533333vw;
                }
                .food-name {
                    font-size: .346667rem;
                    color: #333;
                    margin-bottom: .133333rem;
                    margin-bottom: 1.333333vw;
                }
                .food-info {
                    .food-price {
                        height: .64rem;
                        height: 6.4vw;
                        line-height: .64rem;
                        line-height: 6.4vw;
                        .price {
                            font-size: .346667rem;
                            height: .48rem;
                            height: 4.8vw;
                            line-height: .48rem;
                            line-height: 4.8vw;
                            color: #ff5339;
                            margin-right: .093333rem;
                            margin-right: .933333vw;
                            max-width: 1.333333rem;
                            max-width: 13.333333vw;
                            display: inline-block;
                            vertical-align: middle;
                        }
                        .original-price {
                            font-size: .293333rem;
                            color: #aaa;
                            max-width: 1.066667rem;
                            max-width: 10.666667vw;
                            display: inline-block;
                            vertical-align: middle;
                        }
                    }
                }
                .discount {
                    position: absolute;
                    top: 0;
                    left: 0;
                    font-size: .293333rem;
                    color: #fff;
                    background: #413d3c;
                    padding: .066667rem;
                    padding: .666667vw;
                }
            }
        }
    }

    /*svg*/
    #recommend .st0 {
        fill-rule: evenodd;
        clip-rule: evenodd;
        fill: #ff6000
    }

    #alarm .st0 {
        fill: #f94843
    }

    #alarm .st1 {
        fill: none;
        stroke: #f94843;
        stroke-width: 2
    }
</style>
